<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理页面</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
            display: flex; /* 可选：使用 Flexbox 来居中内容 */
            justify-content: center; /* 可选：居中内容 */
            align-items: center; /* 可选：垂直居中内容 */
            height: 100%; /* 可选：确保 body 高度为 100% */
            flex-direction: column;
        }
        h2 {
            margin-bottom: 20px;
        }
        .container {
            display: grid;
            gap: 20px;
            grid-template-columns: 1fr 1fr;
            height: 80vh;
            width: 80vw;
            padding: 20px;
            justify-items: center; /* 使内容居中 */
        }
        .left-panel {
            width: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 20px;
        }
        .user-list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .user-list, .chat-box {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            overflow-y: auto;
        }
        .user {
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 1px solid #aaa;
            padding: 5px 0;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .lightbulb {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-block;
            margin: 0 10px;
        }
        .button {
            padding: 8px 12px;
            border: none;
            background-color: #ff0d00;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .button:hover {
            background-color: #b3005c;
        }
        .chat-box {
            width: 90%;
            max-height: 400px;
            display: flex;
            flex-direction: column;
        }
        #messages {
            flex: 1;
            overflow-y: auto;
            margin-bottom: 10px;
        }
        .input-area {
            display: flex;
        } 
        .input-area input {
            flex:1;
            width: 80%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 10px;
        }
        .input-area button {
            width: 60px;
            padding: 10px;
            border: none;
            border-radius: 4px;
            background-color: #28a745;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .input-area button:hover {
            background-color: #218838;
        }
        .btn-red {
            background-color: #ff4d4d;
        }
        .btn-green {
            background-color: #4dff4d;
        }
        .btn-off {
            background-color: #ccc;
        }
        #connect-status {
            display: inline-block;
            margin-right: 10px;
            background-color: #4dff4d;
            border-radius: 50% ;
            width: 15px;
            height: 15px;
        }
        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
                width: 100%; /* 或 100% */
                margin: 0 auto; /* 确保居中 */
            }
        }
    </style>
</head>
<body>
    <h2><span id="connect-status"></span>后台管理页面</h2>
    <div class="container">
        <div class="left-panel">
            <div class="user-list" id="user-list">
                <h3>用户灯泡信息</h3>
                <!-- 用户列表将在这里动态填充 -->
            </div>
            <button id="turn-off-all" class="button">熄灭所有灯泡</button>
        </div>
        <div class="chat-box">
            <div id="messages">
                <!-- 聊天记录将在这里显示 -->
            </div>
            <div class="input-area">
                <input id="chat-message" type="text" placeholder="输入消息...">
                <button id="send-chat">发送</button>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            // 创建 WebSocket 连接
            const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
            const host = window.location.host;
            var ws;
            function reconnect() {
                ws = new WebSocket(`${protocol}://${host}/admin/ws`);
                ws.onopen = function() {
                    $("#connect-status").attr("style","background-color: #4dff4d;");
                }
                ws.onclose = function() {
                    console.log("正在尝试重连");
                    $("#connect-status").attr("style","background-color: darkorange;");
                    setTimeout(function() {
                        reconnect();
                    },1000);
                }
                // 监听 WebSocket 消息
                ws.onmessage = function(event) {
                    const data = JSON.parse(event.data);

                    // 更新用户灯泡状态
                    if (data.type === 'update_lightbulb') {
                        const userId = data.data.id;
                        const status = data.data.status;
                        $(`#user-${userId} .lightbulb`).removeAttr("class");
                        $(`#user-${userId}`).children().eq(0).addClass("lightbulb");
                        $(`#user-${userId} .lightbulb`).addClass("btn-"+status);
                        // 找到用户并更新灯泡颜色
                        
                    }

                    // 更新聊天消息
                    if (data.type === 'chat_message') {
                        appendMessage(data.data);
                    }

                    if (data.type === 'chat_message_init') {
                        for(i=0;i<data.data.length;i++) {
                            appendMessage(data.data[i])
                            // $("#messages").append(`<p><strong>${data.data[i].sender}</strong>: ${data.data[i].content}</p>`);
                            // $("#messages").scrollTop($("#messages")[0].scrollHeight); // 滚动到底部
                        }
                    }

                    // 初始化用户数据
                    if (data.type === 'user_data_init') {
                        initUsers(data.data);
                    }
                };
            }
            reconnect();
            function appendMessage(data) {
                $("#messages").append(`<p></p>`);
                converted = $("#messages").children().last().text(`: ${data.content}`).html();
                console.log(converted);
                $("#messages").children().last().html(`<strong>${data.sender}</strong>`+converted);
                $("#messages").scrollTop($("#messages")[0].scrollHeight); // 滚动到底部
            }
            // 初始化用户界面
            function initUsers(users) {
                $("#user-list").empty(); // 清空当前用户列表
                users.forEach(function(user) {
                    $("#user-list").append(`
                        <div class="user" id="user-${user.id}">
                            <div class="lightbulb btn-${user.status}"></div>
                            <span>${user.id}</span>
                        </div>
                    `);
                });
            }

            // 一键熄灭所有灯泡的功能
            $("#turn-off-all").click(function() {
                ws.send(JSON.stringify({ action: 'turn_off_all_lights' }));
            });

            // 发送聊天消息
            $("#send-chat").click(function() {
                var message = $("#chat-message").val();
                if (message) {
                    ws.send(JSON.stringify({ action: 'send_admin_message', data: message }));
                    $("#chat-message").val(""); // 清空输入框
                }
            });

            $("#chat-message").keypress(function(event) {
                if (event.which === 13) { // 按下 Enter 键
                    $("#send-chat").click();
                }
            });
        });
    </script>
</body>
</html>
